﻿@model QLTL_V2.Models.Order
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<h2>Tạo Hóa Đơn Bán Hàng</h2>
<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td align="center">
<a href="@Url.Action("PrintReport", "Report", new { OrderId = Model.OrderId })"> <img src="../../Content/Images/printer-icon.png " height="50px" width="50px"/></a>  

    <br />  <bold>In Hóa Đơn</bold>
</td>

</tr>
</table>



 
<fieldset>
    <legend>Order</legend>
    <div class="display-label">
        Mã Khách Hàng:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.CustomerId)
    </div>
    <div class="display-label">
        Tên:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Customer.Name)
    </div>
    <div class="display-label">
       Địa Chỉ:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Customer.Address)
    </div>
    <div class="display-label">
      Loại Khách Hàng:</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Customer.CustomerType.Name)
    </div>
    <div class="display-label">
        Thời Gian</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.CreatedTime)
    </div>
</fieldset>





@using (Ajax.BeginForm("AddItem",new AjaxOptions{
        HttpMethod = "GET",
        UpdateTargetId = "ItemDetails"
    }))
    {
    <table>
        <tr>
            <th>
                Sản Phẩm
            </th>
            <th>
                Đơn Vị
            </th>
            <th>
                Số Luợng
            </th>
        </tr>
        <tr>
            <td>
                @Html.DropDownList("ProductId", String.Empty)
            </td>
            <td>
                @Html.DropDownList("ProductUnitId", String.Empty)
            </td>
            <td>
                <input type="text" id="Amount" name="Amount" />
                @Html.Hidden("OrderRefId", @Model.OrderId)
                <input type="submit" value="Them" />
            </td>
        </tr>
    </table>
    
    }

    <div id="ItemDetails">
    @{
        
        if(Model.OrderDetails != null){
        var test = Model.OrderDetails.ToList();
        
        Html.RenderPartial("_OrderDetailPartial", test);
        }
      
     }
</div>



    <script type="text/javascript">
        (function ($) {
            $.widget("ui.combobox", {
                _create: function () {
                    var self = this,
					select = this.element.hide(),
					selected = select.children(":selected"),
					value = selected.val() ? selected.text() : "";
                    var input = this.input = $("<input>")
					.insertAfter(select)
					.val(value)
					.autocomplete({
					    delay: 0,
					    minLength: 0,
					    source: function (request, response) {
					        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
					        response(select.children("option").map(function () {
					            var text = $(this).text();
					            if (this.value && (!request.term || matcher.test(text)))
					                return {
					                    label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
												$.ui.autocomplete.escapeRegex(request.term) +
												")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "<strong>$1</strong>"),
					                    value: text,
					                    option: this
					                };
					        }));
					    },
					    select: function (event, ui) {
					        ui.item.option.selected = true;
					        self._trigger("selected", event, {
					            item: ui.item.option
					        });
					    },
					    change: function (event, ui) {
					        if (!ui.item) {
					            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
									valid = false;
					            select.children("option").each(function () {
					                if ($(this).text().match(matcher)) {
					                    this.selected = valid = true;
					                    return false;
					                }
					            });
					            if (!valid) {
					                // remove invalid value, as it didn't match anything
					                $(this).val("");
					                select.val("");
					                input.data("autocomplete").term = "";
					                return false;
					            }
					        }
					    }
					})
					.addClass("ui-widget ui-widget-content ui-corner-left");

                    input.data("autocomplete")._renderItem = function (ul, item) {
                        return $("<li></li>")
						.data("item.autocomplete", item)
						.append("<a>" + item.label + "</a>")
						.appendTo(ul);
                    };

                    this.button = $("<button type='button'>&nbsp;</button>")
					.attr("tabIndex", -1)
					.attr("title", "Show All Items")
					.insertAfter(input)
					.button({
					    icons: {
					        primary: "ui-icon-triangle-1-s"
					    },
					    text: false
					})
					.removeClass("ui-corner-all")
					.addClass("ui-corner-right ui-button-icon")
					.click(function () {
					    // close if already visible
					    if (input.autocomplete("widget").is(":visible")) {
					        input.autocomplete("close");
					        return;
					    }

					    // work around a bug (likely same cause as #5265)
					    $(this).blur();

					    // pass empty string as value to search for, displaying all results
					    input.autocomplete("search", "");
					    input.focus();
					});
                },

                destroy: function () {
                    this.input.remove();
                    this.button.remove();
                    this.element.show();
                    $.Widget.prototype.destroy.call(this);
                }
            });
        })(jQuery);


        $(function () {
            $("#ProductId").combobox();
            $("#ProductUnitId").combobox();
            $("#toggle").click(function () {
                $("#ProductId").toggle();
            });
            $("#toggle").click(function () {
                $("#ProductUnitId").toggle();
            });

        });
</script>
